<template>
    <PageTabelLayout>
        <template #pageHeader>
            <div class="my-header"
                style="padding:10px 10px 10px; display: flex; justify-content: space-between;align-items: center;padding;">
                <a-row style="align-items: center;">
                    <a-row style="margin-right: 20px;align-items: center;">
                        <div style="margin-right: 10px;">客户 (买家):</div>
                        <!--  @change="changeSelectCust" -->
                        <a-select popup-container="html"  class="bacClass" style="width: 270px;" v-model="pageData.selectCustData.client"
                            allow-clear allow-search @click="clientClick('')" @search="clientClick($event)">
                            <a-option v-for="item in  pageData.custVerifyList" :key="item.id" :value="item.client">{{
                                item.client }}</a-option>
                        </a-select>
                    </a-row>
                    <div style="margin-right: 10px;">测试标准：</div>
                    <!-- @change="changeSelectCust" -->
                    <a-select popup-container="html"  class="bacClass" style="width: 270px;" v-model="pageData.selectCustData.verifyStandard"
                        allow-search @click="verifyStandardClick('')" @search="verifyStandardClick($event)"
                        :allowClear="true">
                        <a-option v-for="item in  pageData.custVerifyList2" :key="item.id" :value="item.verifyStandard">{{
                            item.verifyStandard }}</a-option>
                    </a-select>
                </a-row>
                <div class="my-tool-bar">
                    <Toolbar :items="['查询', '新增', '删除']" @add="addHandler" @del="delHandler" @select="selectHandler" />
                </div>
            </div>
        </template>
        <template #pageTabel>
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                @grid-ready="nextGridReady" style="height:86%" class='ag-theme-alpine' :defaultColDef="defaultColDef"
                :rowData="pageData.custNextPageProjectData" :columnDefs="custNuxtPageCfs" :localeText="localeTextData" />
            <paginationCopys :page-size-options="pagingList1" :total="pagination.total" show-total show-jumper show-page-size
                @change="changePage" @page-size-change="changeSize" style="justify-content: center"
                :page-size="pagination.pageSize" :current="pagination.page" />
        </template>
        <a-drawer :drawer-style="{ zIndex: 9999 }" :mask-closable="false" width="100%" :visible="pageData.showAdd"
            placement="bottom" unmountOnClose @ok="sideOk" @cancel="pageData.showAdd = false" cancel-text="关闭" ok-text="保存"
            height="100%" :ok-loading="loadings">
            <template #title>
                {{ pageData.sideTitle }}
            </template>
            <div style="height:100%">
                <a-form ref="formRef" auto-label-width :model="dataForm">
                    <a-row>
                        <a-col :span="4">
                            <a-form-item label="客户（买家）" field="client" :rules="[{ required: true, message: '客户必填' }]"
                                :validate-trigger="['change', 'blur']" style="margin-bottom: 0px;">
                                <a-select popup-container="html"  class="bacClass" style="width: 270px;" v-model="dataForm.client" allow-search
                                    allow-clear @focus="clientFouce('')" @search="clientFouce($event)">
                                    <a-option v-for="item in  pageData.clientList" :key="item.id"
                                        :value="item.customName">{{
                                            item.customName }}</a-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item label="测试标准" field="verifyStandard"
                                :rules="[{ required: true, message: '测试标准必填' }]" :validate-trigger="['change', 'blur']"
                                style="margin-bottom: 0px;">
                                <a-select popup-container="html"  class="bacClass" style="width: 270px;" v-model="dataForm.verifyStandard"
                                    allow-search allow-clear @change="selectChangeVerify" @focus="standardFouce('')"
                                    @search="standardFouce($event)">
                                    <a-option v-for="item in  pageData.testStandardList" :key="item.id"
                                        :value="item.verifyStandard">{{ item.verifyStandard }}</a-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-divider />
                    <a-row>
                        <el-button type="success" :icon="iconText.CirclePlus" @click="addForm"
                            style="margin-bottom: 10px;background:#67c23a ;margin-right: 10px;">新增</el-button>
                        <el-button :icon="iconText.Delete" @click="delForm" style="margin-bottom: 10px;">删除</el-button>
                    </a-row>
                    <el-table border :data="dataForm.CustomVerifyProjectSon" @selection-change="changeTabelSelect"
                        :row-class-name="tableRowClassName" :header-cell-style="{
                            'background': '#dde2eb !important',
                        }">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="面料测试项目">
                            <template #default="scope">
                                <!-- <a-select popup-container="html"  v-model="scope.row.fabricTestItem" allow-clear @change="mlChanges($event, scope)">
                                    <a-option v-for="item in  pageData.fabricTestList" :key="item.id"
                                        :value="item.fabricVerifyProject">{{ item.fabricVerifyProject }}</a-option>
                                </a-select> -->
                                <a-select popup-container="html"  class="bacClass" v-model="scope.row.fabricTestItem" allow-search allow-clear
                                    @focus="selCxAll1('')" @search="selCxAll1($event)" @change="mlChanges($event, scope)">
                                    <a-option v-for="item in  pageData.fabricTestList" :key="item.id"
                                        :value="item.fabricVerifyProject">{{
                                            item.fabricVerifyProject }}</a-option>
                                </a-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="测试类型">
                            <template #default="scope">
                                <a-select popup-container="html"  class="bacClass" v-model="scope.row.verifyType" allow-clear>
                                    <a-option v-for="item in  pageData.verifyTypeList" :key="item.id"
                                        :value="item.verifyType">{{ item.verifyType }}</a-option>
                                </a-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="测试方法">
                            <template #default="scope">
                                <a-select popup-container="html"  class="bacClass" v-model="scope.row.testMethod" allow-clear>
                                    <a-option v-for="item in  pageData.testMethodList" :key="item.id"
                                        :value="item.verifyMethod">{{ item.verifyMethod }}</a-option>
                                </a-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="面料测试要求最小值">
                            <template #default="scope">
                                <a-select popup-container="html"  class="bacClass" v-model="scope.row.verifyMinNum" allow-clear>
                                    <a-option v-for="item in  pageData.requireList" :key="item.id"
                                        :value="item.requireMinNum">{{ item.requireMinNum }}</a-option>
                                </a-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="面料测试要求最大值">
                            <template #default="scope">
                                <a-select popup-container="html"  class="bacClass" v-model="scope.row.verifyMaxNum" allow-clear>
                                    <a-option v-for="item in  pageData.requireList" :key="item.id"
                                        :value="item.requireMaxNum">{{ item.requireMaxNum }}</a-option>
                                </a-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="面料测试大类">
                            <template #default="scope">
                                <a-select popup-container="html"  class="bacClass" v-model="scope.row.fabiceVerifyClass" allow-clear>
                                    <a-option v-for="item in  pageData.fabricTestClassList" :key="item.id"
                                        :value="item.fabricVerifyClass">{{ item.fabricVerifyClass }}</a-option>
                                </a-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="选项值">
                            <template #default="scope">
                                <a-select popup-container="html"  class="bacClass" v-model="scope.row.extandField" allow-clear>
                                    <a-option v-for="item in  pageData.requireList" :key="item.id"
                                        :value="item.extandField">{{ item.extandField }}</a-option>
                                </a-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注">
                            <template #default="scope">
                                <a-input v-model="scope.row.remark" class="bacClass" />
                            </template>
                        </el-table-column>
                    </el-table>
                </a-form>
            </div>
        </a-drawer>
    </PageTabelLayout>
</template>

<script lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { FormInstance, Message, Modal } from '@arco-design/web-vue'
import { useTable, useRowKey, usePagination, useRowSelection } from '@/hooks/table'
import { customNextPageProject, customProject, TestStandardInter, FabricTestCategory } from '@/interface/physicalBasicData'
import { testStandard, customTestProject, fabircTestClass, testType, fabircTest, testMethod, fabircTestRequire, testStandardProject } from '@/api/PhysicalSurveyRoom/basicDataApi'
import PageTabelLayout from '@/components/pageTabelLayout.vue';

import { localeText } from '@/api/aggridZw'
import emitter from '@/hooks/useEventBus'
import { post } from '@/api/http'
import { pagingList } from '@/api/paging'
import {
    CirclePlus
} from '@element-plus/icons-vue'
import { orderFn } from '@/api/laboratory/other'
export default {
    name: "customerTestDefinition",
    setup() {
        const customTestProjectApi = customTestProject();
        let iconText: any = {
            CirclePlus
        }
        onMounted(() => {
            // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
            // doRefresh();
            // emitter.on("refresh-customerTestDefinition", () => {
            //     selectHandler();
            //     // gridOption.value.sizeColumnsToFit();
            // });
            pageData.selectCustData.client = ''
            pageData.selectCustData.verifyStandard = ''
        });
        const clientFouce = async (val: any) => {
            await orderFn().getCustomerList({ customName: val }).then(res => {
                pageData.clientList = res.data;
            });
        }
        const standardFouce = async (val: any) => {
            await testStandardProject().getTestStandardProjectList({ verifyStandard: val }).then(res => {
                pageData.testStandardList = res.data;
            });
        }
        const selectChangeData = async () => {
            await testMethod().getTestMethodList({ deleteState: 0 }).then(res => {
                pageData.testMethodList = res.data;
            });

            await testStandard().getTestStandardList({ deleteState: 0 }).then(res => {
                pageData.testStandardList = res.data;
            });
            await testType().getTestTypeList({ deleteState: 0 }).then(res => {
                pageData.verifyTypeList = res.data;
            });
            await fabircTestRequire().getFabircTestRequireList({ deleteState: 0 }).then(res => {
                pageData.requireList = res.data;
            });
            // await fabircTest().getfabircTestList({ deleteState: 0 }).then(res => {
            //     pageData.fabricTestList = res.data;
            // });
            await fabircTestClass().getFabircTestClassList({ deleteState: 0 }).then(res => {
                pageData.fabricTestClassList = res.data;
            });
        };
        const addHandler = () => {
            for (var key in dataForm) {
                if (key === "id") {
                    dataForm[key] = null;
                }
                else if (key == "serialNo") {
                    dataForm[key] = 0;
                }
                else if (!Array.isArray(dataForm[key])) {
                    dataForm[key] = "";
                }
                else {
                    dataForm[key].forEach((v: any) => {
                        for (var prop in v) {
                            if (prop === "id") {
                                v[prop] = null;
                            }
                            else {
                                v[prop] = "";
                            }
                        }
                    });
                }
            }
            dataForm.CustomVerifyProjectSon = [
                {
                    verifyType: "",
                    fabricTestItem: "",
                    testMethod: "",
                    extandField: "",
                    verifyMinNum: '',
                    verifyMaxNum: '',
                    fabiceVerifyClass: "",
                    remark: ""
                }
            ]
            pageData.showAdd = true;
            pageData.sideTitle = "新增客户测试项目定义";
            selectChangeData();
        };
        const addForm = () => {
            dataForm.CustomVerifyProjectSon.push({
                verifyType: "",
                fabricTestItem: "",
                testMethod: "",
                extandField: "",
                verifyMinNum: 0,
                verifyMaxNum: 0,
                fabiceVerifyClass: "",
                remark: ""
            });
        };
        //根据选中的类型返回对应信息
        const selectChangeVerify = async (data: any) => {
            // console.log(43534534);
            let obj = { verifyStandardProjectId: '' };
            // console.log(data);
            pageData.testStandardList.forEach((v) => {
                if (v.verifyStandard === data) {
                    obj.verifyStandardProjectId = v.id
                };
            });
            await testStandardProject().getByIdNextPageProjectList(obj).then((res: any) => {
                if (res.code === 200) {
                    let list = res.data;
                    let vals = list.map((vItem: any) => {
                        return {
                            verifyType: vItem.verifyType,
                            fabiceVerifyClass: vItem.fabiceVerifyClass,
                            testMethod: vItem.testMethod,
                            extandField: vItem.extandField,
                            verifyMinNum: vItem.verifyMinNum,
                            verifyMaxNum: vItem.verifyMaxNum,
                            remark: vItem.remark,
                            fabricTestItem: vItem.fabricVerifyProject,
                        }
                    });
                    dataForm.CustomVerifyProjectSon.forEach((v, i, arr) => {
                        vals.forEach((item: any, s: any) => {
                            // let obj = {};
                            arr[s] = { ...v, ...item }
                        })
                    });
                } else {
                    Message.error({
                        content: res.message,
                        duration: 5000,
                    });
                }
            });
        }
        let selectData: any[] = [];
        const changeTabelSelect = (data: any,) => {
            selectData = [];
            data.forEach((item: any) => {
                selectData.push(item.index)
            });
        }
        const tableRowClassName = (row: any, index: number) => {
            row.row.index = row.rowIndex;
        };
        const delForm = () => {
            if (selectData.length > 0) {
                // console.log(selectData);
                for (let i = selectData.length - 1; i >= 0; i--) {
                    dataForm.CustomVerifyProjectSon.splice(selectData[i], 1);
                };
            } else {
                Message.error({ content: '请选择需要删除的数据' })
            }
            selectData = [];
        }
        const delHandler = () => {
            let vals = nextGridOption.value.getSelectedRows().map((v: any) => {
                return v.id
            });
            // console.log(nextGridOption.value.getSelectedRows());
            if (vals.length > 0) {
                Modal.confirm({
                    title: "提示",
                    content: "确定要批量删除选中数据吗？",
                    cancelText: "取消",
                    okText: "删除",
                    onOk: async () => {
                        await customTestProjectApi.batchDelCustomTestProject(vals).then((res) => {
                            if (res.code === 200) {
                                Message.success("数据删除成功");
                                selectHandler();
                            }
                            else {
                                Message.error("数据删除失败");
                            }
                        });
                    },
                });
            } else {
                Message.info("请选择需要删除的数据");
            }
        };
        const selectHandler = () => {
            pagination.page = 1;
            doRefresh();
        };
        const cellClickHandle = async ({ id }: any) => {
            await customTestProjectApi.getByIdNextPageProjectList({ id }).then(res => {
                pageData.custNextPageProjectData = res.data.list;
            });
        };
        const editHandler = async (record: any) => {
            pageData.showAdd = true;
            pageData.sideTitle = "编辑面料测试项目";
            let data = { id: record.id };
            // if (record.customVerifyProjectId > 0) {
            //     data.id = record.customVerifyProjectId;
            // } else {
            //     data.id = record.id;
            // };
            await customTestProjectApi.getByIdNextPageProjectList({ ...data }).then(res => {
                let verifyData = reactive<{
                    list: customNextPageProject[];
                }>({
                    list: []
                });
                verifyData = res.data.customVerifyProject;
                verifyData.list = res.data.list;
                let keys = Object.keys(verifyData);
                keys.forEach(v => {
                    if (v != 'list') {
                        dataForm[v] = verifyData[v];
                    }
                });
                dataForm.CustomVerifyProjectSon = verifyData.list
                selectChangeData();
            });
        };
        // const changeSelectCust = (data: any) => {
        //     pageData.custVerifyList.forEach(v => {
        //         if (v.client === data) {
        //             cellClickHandle(v);
        //             pageData.selectCustData = v;
        //         }
        //     })
        // }
        const changeSelectCust = (data: any) => {
            pageData.custVerifyList.forEach(v => {
                if (v.verifyStandard === data || v.client === data) {
                    cellClickHandle(v);
                    pageData.selectCustData = v;
                }
            })
        }
        const doRefresh = async (id: any = "") => {
            pageData.pageLoading = true;
            post({
                url: 'pdm/CustomVerifyProject/getPage',
                data: {
                    page: pagination.page,
                    size: pagination.pageSize,
                    client: pageData.selectCustData.client,
                    verifyStandard: pageData.selectCustData.verifyStandard,
                }
            }).then((res) => {
                pageData.custNextPageProjectData = res.data.list
                pagination.total = res.data.total
                //  console.log(res);
                // if (res.code === 200) {
                //     pageData.custVerifyList = res.data.list;
                //     pageData.selectCustData = res.data.list[0];
                //     let obj = { id };
                //     if (!obj.id) {
                //         obj.id = res.data.list[0].id
                //     }
                //     cellClickHandle(obj);
                //     pagination.setTotalSize(res.data.total);
                // }
            }).catch(console.log).finally(() => {
                pageData.pageLoading = false;
            });
        };
        const sideOk = () => {
            formRef.value?.validate().then(async (err) => {
                if (!err) {
                    loadings.value = true
                    if (!dataForm.id) {
                        await customTestProjectApi.operCustomTestProject({ ...dataForm }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd = false;
                                // if (dataForm.id) {
                                //     Message.success({
                                //         content: "修改成功",
                                //         duration: 5000,
                                //     });
                                //     doRefresh(dataForm.id);
                                // } else {
                                Message.success({
                                    content: "新增成功",
                                    duration: 5000,
                                });
                                doRefresh();
                                // }
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }

                        }).catch((res) => {
                            console.log(res);
                        }).finally(() => {
                            loadings.value = true
                        })
                    } else {
                        post({
                            url: '/pdm/CustomVerifyProject/update',
                            data: { ...dataForm }
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd = false;
                                Message.success({
                                    content: "修改成功",
                                    duration: 5000,
                                });
                                doRefresh();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }
                        }).finally(() => {
                            loadings.value = true
                        })
                    }
                }
                else {
                    console.log(err);
                }
            });
        };
        const toRowClick = (data: any) => {
            let vals = data.data;
            cellClickHandle(vals);
        }
        const dataForm = reactive<customProject>({
            id: null,
            serialNo: 0,
            client: "",
            verifyStandard: "",
            CustomVerifyProjectSon: [
                {
                    verifyType: "",
                    fabricTestItem: "",
                    testMethod: "",
                    extandField: "",
                    verifyMinNum: 0,
                    verifyMaxNum: 0,
                    fabiceVerifyClass: "",
                    remark: ""
                }
            ]
        });
        const pageData = reactive<{
            custNextPageProjectData: customNextPageProject[];
            showAdd: boolean;
            sideTitle: string;
            pageLoading: boolean;
            testStandardList: TestStandardInter[];
            fabricTestClassList: FabricTestCategory[];
            clientList: any[],
            verifyTypeList: any[],
            fabricTestList: any[],
            testMethodList: any[],
            requireList: any[],
            custVerifyList: any[],
            custVerifyList2: any[],
            selectCustData: any,
        }>({
            custNextPageProjectData: [],
            showAdd: false,
            sideTitle: "新增面料测试项目",
            pageLoading: false,
            testStandardList: [],
            fabricTestClassList: [],
            clientList: [],
            verifyTypeList: [],
            fabricTestList: [],
            testMethodList: [],
            requireList: [],
            custVerifyList: [],
            custVerifyList2: [],
            selectCustData: {}
        });
        const table = useTable();
        const rowKey = useRowKey("id");
        const { selectedRowKeys } = useRowSelection();
        const formRef = ref<FormInstance>();
        const pagination = reactive({
            page: 1,
            pageSize: 10,
            total: 0
        });
        //表格方面
        const gridOption = ref();
        const nextGridOption = ref();
        const gridReady = (params: any) => {
            gridOption.value = params.api;
            //调整表格自适应大小
            // gridOption.value.sizeColumnsToFit();
        }
        const nextGridReady = (params: any) => {
            nextGridOption.value = params.api;
            //调整表格自适应大小
            nextGridOption.value.sizeColumnsToFit();
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            flex: 1
        };
        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        let custNuxtPageCfs: any[] = [
            {
                headerName: "序号",
                field: "serialNo",
            },
            {
                headerName: "买家(客户)",
                field: "client",
            },
            {
                headerName: "测试标准",
                field: "verifyStandard",
            },
            {
                headerName: "备注",
                field: "remark",
            },
            {
                headerName: "删除状态",
                field: "deleteState",
                cellRenderer: {
                    template: `<a-tag color="#ff7d00" v-if="a == 0" class="gesture">未删除</a-tag>
                    <a-tag color="#" v-if="a == 1" class="gesture">已删除</a-tag>
                    `,
                    setup(props: any) {
                        return {
                            a: props.params.data.deleteState
                        }
                    }
                },
                filterParams: {
                    valueFormatter: (params) => {
                        return params.value == 0 ? '未删除' : '已删除'
                    },
                },
            },
            {
                headerName: "创建人",
                field: "createName",
            },
            {
                headerName: "创建时间",
                field: "createTime",
            },
            {
                headerName: "修改人",
                field: "updateName",
            },
            {
                headerName: "修改时间",
                field: "updateTime",
            },
            {
                headerName: '操作',
                field: 'action',
                resizable: false,
                filter: false,
                sortable: false,
                lockPosition: 'right',
                width: '120',
                pinned: 'right',
                cellRenderer: {
                    template: `<a-tag color="#ff7d00" @click="a" class="gesture">修改</a-tag>`,
                    setup(props: any) {
                        const a = () => {
                            editHandler(props.params.data)
                        }
                        return {
                            a
                        }
                    }
                },
            },
        ];
        custNuxtPageCfs = a.concat(custNuxtPageCfs)
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        }
        const localeTextData: any = ref(localeText)

        const mlChanges = ($event: any, val: any) => {
            post({
                url: 'pdm/FabricVerifyProject/getList',
                data: { fabricVerifyProject: $event }
            }).then(({ data }) => {
                val.row.verifyType = data[0].verifyType
                val.row.testMethod = data[0].verifyMethod
            })
        }
        const pagingList1: any = ref(pagingList)

        const clientClick = (val: any) => {
            post({
                url: 'pdm/CustomVerifyProject/getFieldValue',
                data: {
                    client: val
                }
            }).then(({ data }) => {
                pageData.custVerifyList = data
            })
        }

        const verifyStandardClick = (val: any) => {
            post({
                url: 'pdm/CustomVerifyProject/getFieldValue',
                data: {
                    verifyStandard: val
                }
            }).then(({ data }) => {
                pageData.custVerifyList2 = data
            })
        }
        function selCxAll1(val: any) {
            post({
                url: "pdm/FabricVerifyProject/getFieldValue1",
                data: { fabricVerifyProject: val }
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.fabricTestList = data;
                } else {
                    Message.error({
                        content: "查询失败！",
                        duration: 5000,
                    });
                }
            });
        }

        const loadings = ref(false)
        return {
            loadings,
            selCxAll1,
            verifyStandardClick,
            clientClick,
            pagingList1,
            mlChanges,
            table,
            rowKey,
            selectedRowKeys,
            formRef,
            pagination,
            addHandler,
            delHandler,
            selectHandler,
            cellClickHandle,
            editHandler,
            pageData,
            sideOk,
            dataForm,
            delForm,
            tableRowClassName,
            changeTabelSelect,
            addForm,
            custNuxtPageCfs,
            total,
            changePage,
            changeSize,
            localeTextData,
            gridReady,
            defaultColDef,
            toRowClick,
            iconText,
            nextGridReady,
            nextGridOption,
            selectChangeVerify,
            changeSelectCust,
            clientFouce,
            standardFouce,
        };
    },
    components: { PageTabelLayout,  }
}
</script>

<style scoped>
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.aInput {
    /* width: 270px; */
    background: #fff;
    border: 1px solid #c9cdd3;
}
</style>